<script setup>
import {ref} from 'vue'
const value = ref('济南交通枢纽')

</script>

<template>
  <div class="header-search">
    <div class="search-bg">
      <a-select class="common-input" placeholder="请选择" :bordered="false" v-model="value">
        <a-option>济南交通枢纽</a-option>
        <template #arrow-icon>
          <img class="input-icon" src="../assets/input-arrow.svg">
        </template>
      </a-select>
    </div>
    <div class="search-bg middle">
      <a-input class="search-input" placeholder="搜索" allow-clear :bordered="false"/>
    </div>
    <div style="flex: 1">
      <img class="header-decorate" src="../assets/header-decorate.png">
    </div>
  </div>
</template>

<style scoped>
.header-search {
  padding: 60px 16px 0 51px;
  display: flex;
  align-items: flex-end;
}
.search-bg {
  background: url("../assets/input-box.png") no-repeat;
  background-size: 100% 100%;
  width: 224px;
  height: 29px;
}
.input-icon {
  width: 10px;
  height: 9px;
}
.middle {
  margin: 0 10px 0 14px;
}
.search-input {
  height: 100%;
  background-color: transparent;
  border: none;
  color: #32C9D3;
}
.header-decorate {
  height: 26px;
  width: 100%;

}
</style>